<template>
  <div class="content">
    <el-row class="bgW">
      <el-col :span="22">
        <el-form class="search" :inline="true" size="mini" :model="search">
          <el-form-item label="日期：">
            <el-date-picker
              v-model="search.start"
              type="date"
              class="w130"
              placeholder="开始日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
            <el-date-picker
              v-model="search.end"
              type="date"
              class="w130"
              placeholder="结束日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <!-- <el-form-item label="类型">
            <el-select v-model="search.type" placeholder="请选择类型" class="w180" clearable>
              <el-option
                v-for="item in options.type"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item> -->
        </el-form>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList('search')">搜索</el-button>
      </el-col>
    </el-row>
    <div class="accountCon" v-loading="clientLoading"  element-loading-text="拼命加载中">
      <div v-if="list.length !== 0"   >
        <div  style="display: grid; grid-template-columns: repeat(auto-fill, 300px);column-gap: 45px;row-gap: 20px;">
          <el-card v-for="item in list" :key="item.id" class="card">
            <el-row>
              <el-col :span="14"  style="font-size: 17px;font-weight: 600;margin-bottom: 5px;">{{ item.notes_name }}</el-col>
              <el-col :span="10" style="text-align: right;"><b  style="color: #33bea7;">{{item.symbol == 1 ? '+' : ''}}{{ item.total_change_amount}}</b></el-col>
            </el-row>
            <el-row>
              <el-col :span="14">本金：<b  style="color: #33bea7;">{{ item.amount_change }}</b></el-col>
              <el-col :span="10" style="text-align: right;">赠金：<b  style="color: #33bea7;">{{ item.gift_change }}</b></el-col>
            </el-row>
            <el-row>
              <el-col>交易时间：{{ item.create_time }}</el-col>
            </el-row>
            <el-row>
              <el-col>当前可用余额：{{item.total_now_balance}}</el-col>
            </el-row>
          </el-card>
        </div>
      
        <pagination
          class="page tc mt10"
          :page-sizes="[6, 12, 24, 36]"
          :total="page.total"
          :page.sync="page.page"
          :limit.sync="page.pagesize"
          @pagination="getList"
        />
      </div>
      <el-empty v-else description="暂无数据" class="mr50 mt50"></el-empty>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import pagination from "@/components/Pagination";
import {
  accountLogList
} from "@/api/client";
class Search {
  start = "";
  end = "";
  type = "";
}
class Page {
  total = 0;
  page = 1;
  pagesize = 12;
}
class Options{
  type = [
    { id: 1, name: "退款单" },
    { id: 2, name: "退货单" },
    { id: 3, name: "收款单" },
    { id: 4, name: "出库单" }

  ]
}
export default {
  name: "ClientList",
  components: {
    pagination
  },
  props: {
    clienId: {
      type: String,
      default: ""
    },
    consignee: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      clientLoading:true,
      page: new Page(),
      search: new Search(),
      options:new Options(),
      list: [],
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  mounted() {
    
    this.getList();
  },
  methods: {
    
    totalValue(amount,gift) {
      const sum = parseFloat(amount || 0) + parseFloat(gift || 0);
      return sum.toFixed(2); 
    },
    getList(option) {
      if (option === "search") this.page = new Page();
      accountLogList({
        ...this.page,
        ...this.search,
        action:'zhanghu',
        customer_id: this.clienId,
      }).then(res => {
        this.list = res.data.data;
        this.clientLoading = false;
        if (!this.list.length) {
          this.notHave = true;
        }
        this.page.total = res.data.total;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.card{
  line-height: 30px;
}
::v-deep .el-card__body{
  padding: 10px 18px !important;
  line-height: 30px;
}
</style>
